import React from "react";
import './index.css';
import ProductCard from "../../../../Component/ProductCard";
import {Button,Input} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import BGUtil from "../../../../utils/BGUtil"
// import IFrameUtil from "../../../../utils/IFrameUtil";
import MessageUtil from "../../../../utils/MessageUtil";
import Payment from "../../../../Common/svg/Payment";
import WeChatSmall from "../../../../Common/svg/WeChatSmall";
import AliSmall from "../../../../Common/svg/AliSmall";
import { Radio  } from 'antd';
import Blank from "../../../../Component/Blank";
import Wallet from "../../../../Common/svg/Wallet";
import TradeServer from "../../../../Server/Trade/TradeServer";
import URL from "../../../../Server/URL";
import Common from "../../../../utils/Common";
import MessageManager from "../../../../utils/Message/MessageManager";
import User from "../../../../Server/User";
import UserCheck from "../../../../utils/UserCheck";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        let id=props.match.params.id;

        this.state={
            id,
            sellerName:"",
            seled:false,
            price:"",
            title:"",
            timeStr:"",
            balance:0,
        }
        BGUtil.InitBG();
        // IFrameUtil.UpdateIframeHeight();
        this.Gen(0);
        User.SelectUserInformation(UserCheck.GetUserID())
        .then(response=>{
            this.setState({
                balance:response.data.userBalance
            });
        });
    }
    Gen(status){
        TradeServer.SendSellSelectSendSellDetails(this.state.id,status)
        .then(response=>{
            console.log(response)
            let data=response.data;
            let sellData=data.sendSell;

            this.setState({
                price:sellData.shootingMoney,
                time:sellData.shootingTime,
                // sellHeader:URL.GetURL(data.userHead),
                sellerName:data.userName,
                // id:sellData.id,
                title:sellData.title,
                isCashDeposit:sellData.cashDeposit>0,
                address:`拍摄地点: ${sellData.shootingAddress}`,
                timeStr:Common.GetTimeStr(sellData.time)
            });
        })
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        let badge=this.state.isCashDeposit?<img alt="Insurance" src="/assets/Good/Insurance.png"/>:"";
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                <div className="HireServiceOrderDetail">
                    <ProductCard
                        title={this.state.title}
                        subtitle={[this.state.timeStr,this.state.address, ]}
                        badge={[
                            badge
                        ]}
                        image={<img alt="drone" src="/assets/Drone/drone.png"/>}
                        priceText={<PriceTag  price={this.state.price} unit={"天"}/>}
                    />
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">卖家昵称</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.sellerName} disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">订单编号</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.id}  disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">平台交易号</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.id}  disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">交易时间</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.timeStr}  disabled={true}/>
                        </div>
                    </div>

                    <div >
                        <div className="">
                            <Payment/>支付方式
                        </div>
                        <Radio.Group onChange={e=>this.setState({value: e.target.value}) } 
                            defaultValue={"fly"}
                            style={{width:"100%"}} value={this.state.value}>
                                <div onClick={e=>this.setState({value:"fly"})} className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}>
                                    <span className="CoursewarePay_Select_ICO">
                                    <Wallet/></span>Fly余额支付（可用余额: ￥{this.state.balance}）
                                    <Blank/>  <Radio value={"fly"} defaultChecked={true}></Radio></div>
                                <div className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><AliSmall/></span>支付宝支付
                                    <Blank/><Radio value={"ali"} disabled={true}></Radio></div>
                                <div className="GrayBGContainer CoursewarePay_Select" style={{display:"flex"}}><span className="CoursewarePay_Select_ICO"><WeChatSmall/></span>微信支付
                                    <Blank/><Radio value={"wechat"} disabled={true}></Radio></div>
                            </Radio.Group>
                    </div>

                    <div className="HireServiceDetail_Bottom">
                        <a href="/trade/secondHand" alt="pay">
                            <Button style={{width:"12rem"}} type="" shape="round" size="large">
                                取消
                            </Button>
                        </a>
                            <Button style={{width:"12rem"}} type="primary" 
                            shape="round" size="large" 
                            onClick={e=>MessageManager.ShowConfirmTradeDistributePay(this.state.id,this.state.price)}>
                                确认支付
                            </Button>
                    </div>
                </div>
            </div>
        )
    }
}